import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  chartTriggerContainer: {
    minWidth: "456px",
  },
  chartLegend: {
    display: "flex",
    fontSize: "12px",
    gap: "14px",
    justifyContent: "flex-end",
  },
  legend: {
    display: "flex",
    alignItems: "center",
    marginBottom: "30px",
    lineHeight: "17px",
  },
  withPointer: {
    cursor: "pointer",
  },
  legendMark: {
    display: "inline-block",
    width: "16px",
    height: "6px",
    borderRadius: "2px",
    marginRight: "8px",
    background: "#d9d9d9",
  },
  legendUnbroken: {
    background: "#037AFF",
  },
  legendBroken: {
    background: "#c55252",
  },
  chartContainer: {
    display: "flex",
    margin: "0 auto",
    maxWidth: "1000px",
    minWidth: "456px",
  },
  item: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    height: "50%",
    fontSize: "12px",
    minWidth: "27px",
    maxWidth: "45px",
    minHeight: "73px",
    lineHeight: "17px",
    "& i": {
      fontSize: "38px",
    },
  },
  iconContainer: {
    width: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  stepIcon: {
    cursor: "pointer",
    width: "100%",
    height: "100%",
    display: "flex",
    justifyContent: "center",
  },
  itemName: {
    paddingTop: "8px",
    width: "max-content",
    minHeight: "18px",
    minWidth: "100%",
    textAlign: "center",
  },
  count: {
    minHeight: "18px",
    minWidth: "100%",
    textAlign: "center",
  },
  itemRotate: {
    height: "calc(80%);",
    transform: "rotate(40deg)",
    justifyContent: "center",
    padding: 0,
  },
  itemRotateNegative: {
    height: "calc(80%);",
    transform: "rotate(-40deg)",
    justifyContent: "center",
    padding: 0,
  },
  col: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    flex: "1 1",
  },
  largeCol: {
    flex: "1.5 2",
  },
  colJustifyEnd: {
    justifyContent: "end",
  },
  unSelected: {
    color: "#d9d9d9",
  },
  selectedUnbroken: {
    color: "#037AFF",
  },
  selectedBroken: {
    color: "#c55252",
  },
  arrowBroken: {
    color: "#D64D27",
    opacity: 0.5,
  },
  arrowUnBroken: {
    color: "#2C66E1",
    opacity: 0.5,
  },
});

const usePopoverStyles = createUseStyles({
  popoverContainer: {
    display: "flex",
    flexDirection: "column",
    gap: 16,
  },
  item: {
    display: "flex",
    alignItems: "center",
  },
  label: {
    display: "inline-block",
    width: "90px",
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    color: "#999999",
  },
  value: {
    color: "#333333",
  },
  highlight: {
    color: "#037AFF",
    cursor: "pointer",
  },
});

export { useStyles, usePopoverStyles };
